<!doctype html>
<html>
  <head>
    <!-- Required meta tags -->
    <!-- <meta charset="utf-8"> -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<style>
		form{ 
			vertical-align:middle; 
			width:30%;
			background-color:black;
			background-clip: padding-box;
			background: rgba(0, 0, 0, 0.5); 
			-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
			-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
			box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
			overflow: hidden;
		} 
		body{
		  font-family: "黑体";
		  width: 100%;
		  height:100%;  background:url("./image/back1.jpg") no-repeat;
		  background-size: 100%;
		}
		p{
		  font-family: "黑体";
		  color:white;
		}
	</style>
	
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./styles/bootstrap.min.css">

    <title>index</title>
  </head>
  <body>
	<center>
		<div style="margin-top:10%;">
		  <h1>Hello Guys!</h1>
		  <h2>Welcome to use the SandBox,Please enter your 
			Username and Password!</h2>
		</div>
		<form class="border rounded" style="margin-top:7%;">
		  <br />
		  <div class="form-group">
			<input type="text" class="form-control" style="width:90%;background: rgba(255, 255, 255, 0.8)" 
					id="username"  onblur="checkName('username')"  name="username" placeholder="账号" value="demo">
		  </div>
		  <div class="form-group">
			<input type="password" class="form-control" style="width:90%;background: rgba(255, 255, 255, 0.8)" 
					id="password" onblur="checkPwd('password')" name="password" placeholder="密码" value="123456">
		  </div>
		  <button type="button" class="btn btn-primary" style="width:90%;margin-bottom:15px" onclick="loginAction()" id="loginBtn">登录</button>
		</form>
	</center>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<hr>
	<footer class="container">
      <p>&copy; Company 电子支付</p>
    </footer>
	
    <script type="text/javascript" src="js/jquery-slim.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/cookie_util.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript">
		$(function(){
			layer.open({
				title: ['用户须知！', 'font-size:18px;'],
				//type: 1,
				skin: 'layui-layer-lan', //样式类名
				closeBtn: 2, //不显示关闭按钮
				area: ['500px', '400px'],
				anim: 6,  //动画
				time: 15000,  //消失时间
				shadeClose: true, //开启遮罩关闭
				content: "<div><h2>1——本沙箱图片全部来自百度，擅自转载系侵权！</h2><p></p><h2>2——感谢<a href='http://www.bootcss.com/'>Bootstrap</a>对其技术的开源！</h2><p></p><h2>3——感谢<a href='http://layer.layui.com/'>layer</a>对其技术的开源！</h2></div>"
				});
		});
	</script>
  </body>
</html>